<template>
  <div class="page-footer">
    <div class="footer-content-wrap xui-fc">
      <div class="xui-fl xui-text-center left-part">
        <img src="@/assets/images/logo-white.png" alt="">
        <p class="xui-margin-top-sm xui-font-size-xs">COPYRIGHT © 2018 长沙市博物馆.</p>
        <p class="xui-margin-top-xs xui-font-size-xs">ALL RIGHTS RESERVED
          <a href="http://www.miit.gov.cn/" class="color-gray">湘ICP备14003217号-2</a>
        </p>
        <p class="xui-margin-top-xs xui-font-size-xs">法律顾问单位：湖南金州律师事务所</p>
        <a href="http://bszs.conac.cn/sitename?method=show&amp;id=0C6C372EEC8D7A9BE053012819AC399A" target="_blank">
          <img id="imgConac" vspace="0" hspace="0" border="0" src="http://dcs.conac.cn/image/blue.png" style="height:70px"
            data-bd-imgshare-binded="1">
        </a>
      </div>
      <div class="xui-fl site-map">
        <dl v-if="isRouterMounted && item.title !== '首页'&& item.title !== 'Home' && item.name !== 'userCenter' && item.title"
          v-for="(item,index) in SiteMap" :key='index' class="xui-fl">
          <dt>{{item.title}}</dt>
          <dd v-if="child.title" v-for="(child,index) in item.children" :key="index">
            <router-link :to="{name:child.name}">{{child.title}}</router-link>
          </dd>
        </dl>
      </div>
      <div class="xui-fr right-part">
        <div class="rel-link-wrap">
          <select name="" id="" class="rel-link" v-model="friendLink" @change="open">
            <option value="">- 友情链接 -</option>
            <option v-for="(link,index) in friendLinks" :value="link.url" :key="index">{{link.name}}</option>
          </select>
          <i class="iconfont icon-down"></i>
        </div>
        <div class="xui-fc xui-margin-top">
          <div class="xui-fl xui-margin-right">
            <img src="@/assets/images/layout/footer-qrcode.jpg" alt="" width="60" height="auto">
            <p class="xui-text-center color-white xui-font-size-xs">微信加关注</p>
          </div>
          <div class="xui-fl xui-margin-right">
            <img src="@/assets/images/home/weibo.png" alt="" width="60" height="auto">
            <p class="xui-text-center color-white xui-font-size-xs">微博加关注</p>
          </div>
          <div class="xui-fl">
            <!-- <img src="@/assets/images/layout/footer-qrcode.jpg" alt="" width="60" height="auto"> -->
            <!-- <div style="width:60px;height:60px;background:#fff;letter-spacing:10px;padding:9px 0 0 10px;color:#333">敬请期待</div> -->
            <img src="@/assets/images/layout/app_qrcode.png" alt="" width="60" height="auto">

            <p class="xui-text-center color-white xui-font-size-xs xui-margin-top-xs">APP下载</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import siteMap from "@/config/site-map";
  import {
    getFriendLink
  } from "@/api/list";

  export default {
    data() {
      return {
        friendLink: "",
        friendLinks: [],
        html: `<script type='text/javascript'>document.write(unescape("%3Cspan id='_ideConac' %3E%3C/span%3E%3Cscript src='http://dcs.conac.cn/js/19/282/0000/60454911/CA192820000604549110001.js' type='text/javascript'%3E%3C/script%3E"));<\/script>`
      };
    },
    computed: {
      SiteMap() {
        let ori = this.$store.getters.siteMap;
        console.log(ori);
        return ori;
      },
      isRouterMounted() {
        return this.$store.state.router.isRemoteRoutesAdded;
      }
    },
    methods: {
      open() {
        if (this.friendLink) window.open(this.friendLink);
      },
      getFriendLink() {
        getFriendLink().then(res => {
          this.friendLinks = res.data.recordsList;
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getFriendLink();
      });
    }
  };

</script>


<style lang='less' rel="stylesheet/less" scoped>
  @import "~@/assets/css/config.less";

  .page-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-width: 1200px;
    height: @footer-height;
    background: #544840;
    padding-top: 40px;

    .footer-content-wrap {
      width: 1200px;
      margin: 0 auto;
      color: #9b9a9a;

      .left-part {
        // padding-top: 30px;
        border-right: 1px solid #676767;
        padding-right: 20px;
        // padding-bottom: 45px;
      }

      .site-map {
        dl {
          margin-left: 30px;

          dt {
            margin-bottom: 10px;
            font-size: 15px;

            a {
              color: #fff;
            }
          }

          dd {
            margin-top: 5px;

            a {
              color: #cdcdcd;
              font-size: 12px;
            }
          }
        }
      }

      .right-part {
        .rel-link-wrap {
          position: relative;
          cursor: pointer;

          .iconfont {
            pointer-events: none;
          }

          select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-left: 10px;
            cursor: pointer;
          }

          i {
            position: absolute;
            right: 8px;
            top: 9px;
            color: #fff;
            font-size: 12px;
          }
        }

        .rel-link {
          width: 220px;
          background: #867668;
          color: #fff;
          border: none;
          height: 36px;
          outline: none;
        }

        p {
          color: #fff;
        }
      }
    }
  }

</style>
